<template>
  <div class="hello">
	<div class="wylogIn">
		<!-- 头部 -->
		<div class="header">
			<div class="nav">
				<div class="line">
					<a href="#">
						<van-icon name="wap-home-o" />
					</a>
					<a href="#" class="logo"></a>
					<div>
						<a href="#" class="nav-icon">
							<van-icon name="search" />
						</a>
						<a href="#">
							<van-icon name="shopping-cart-o" />
						</a>
					</div>
				</div>
			</div>
		</div>
		<div class="log-in-content">
			<div class="content">
				<div class="cont-top">
					<div class="logo2">
						<van-image :src="logo2" class="logo2-img"/>
					</div>
					<div class="btn">
						<a href="#">
							<van-icon name="orders-o" />
							手机号快捷登录
						</a>
						<a href="#">
							<van-icon name="envelop-o" />
							邮箱账号登录
						</a>
					</div>
				</div>
				<div class="cont-bot">
					<div class="item">
						<span>
							<i></i>
							<span>微信</span>
						</span>
					</div>
					<div class="item">
						<span>
							<i></i>
							<span>QQ</span>
						</span>
					</div>
					<div class="item">
						<span>
							<i></i>
							<span>微博</span>
						</span>
					</div>
				</div>
			</div>
		</div>
	</div>
  </div>
    
</template>

<script>

export default {
  name: 'wylogIn',
  props: {
    msg: String
  },
  data(){
	return{
		logo2:require('../assets/img2/2.png'),
	}
  }
}
</script>

<style scoped>
  /* 头部 */
  .header{
	height: 1.16rem;
    background-color: #fafafa
   }
  .nav{
	height: 1.17333rem;
	padding: 0 .32rem;
	position: relative;
  }
  .logo{
	display: block;
	width: 2.29211rem;
	height: .719616rem;
	background: url(../assets/img2/1.webp) 0 -1.70667rem;
	background-size: 2.29333rem 5.6rem;
	position: absolute;
	top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }
  .line{
	height: 1.17333rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
  }
  .line>>>.van-icon{
	font-size: 0.746268rem;
	color: #666;
  }
  .nav-icon{
	margin-right: .26667rem;
  }
  /* 主内容 */
  .log-in-content{
	height: 16.63113rem;
  }
  .content{
	height: 100%;
	background-color: #F2F5F4;
	position: relative;
  }
  .logo2{
	width: 100%;
	height: 100%;
	text-align: center;
	padding-top: 2.13333rem;
	padding-bottom: 3.09333rem;
  }
  .logo2-img{
	width: 3.571428rem;
	height: 1.19936rem;
  }
  .btn{
	padding: 0 .533049rem;
	margin-bottom: 2.71855rem;
  }
  .btn a:first-child,.btn a:nth-child(2){
	display: block;
	width: 100%;
	height: 1.252665rem;
	line-height: 1.252665rem;
	text-align: center;
	border-radius: 2px;
	font-size: .37333rem;
  }
  .btn a:first-child{
	background-color: #DD1A21;
	color: #fff;
	margin-bottom: .426439rem;
  }
  .btn a:nth-child(2){
	box-sizing: border-box;
	border: 1px solid #DD1A21;
	color: #DD1A21;
  }
  .cont-bot{
    width: 100%;
	height: .53333rem;
	position: absolute;
    left: 0;
    bottom: 1.06667rem;
    text-align: center;
  }
  .btn a>>>.van-icon{
	font-size: .533049rem;
	vertical-align: middle;
  }
  .item{
	height: .53333rem;
	border-right: 1px solid #979797;
	display: inline-block;
	padding: 0 .53333rem;
  }
  .item:last-child{
	border: none;
  }
  .item i{
	display: inline-block;
	width: .533049rem;
	height: .533049rem;
	position: relative;
	top: .13333rem;
  }
  .item:first-child i{
	background: url(../assets/img2/4.png) no-repeat;
	background-size: 100%;
  }
  .item:nth-child(2) i{
	background: url(../assets/img2/5.png) no-repeat;
	background-size: 100%;
  }
  .item:nth-child(3) i{
	background: url(../assets/img2/6.png) no-repeat;
	background-size: 100%;
  }
  .item span{
	height: .53333rem;
    position: relative;
    top: -.13333rem;
  }
  .item span span{
	font-size: .37333rem;
    height: .53333rem;
    color: #7F7F7F;
    margin-left: .06667rem;
	position: relative;
    top: .002rem;
  }
</style>
